//导入的组件
<template>
  <div class="DragNode" v-if="item">
	  <div
		  class="set_operator"
		  :class="{
                    [`active_${item.menuType}`]: item.isActive,
                    [item.menuType]: true
                  }"
	  >
		  <img :src="require(`@/assets/images/${item.imgName}`)" alt="" v-if="item.imgName">
	  </div>
	  <div class="item_label">
		  <div v-if="item.error">
			  <el-tooltip
				  v-if="item.error"
				  class="item"
				  effect="dark"
				  :content="item.error"
				  placement="top-start"
			  >
				  <span class="iconfont icon-tishi yellow_text" />
			  </el-tooltip>
		  </div>
		  <div
			  class="over_text"
			  style="flex: 1; text-align: center; width: 100%"
			  :title="item.error"
		  >
			  {{ item.label }}{{item.error}}
		  </div>
	  </div>
  </div>
</template>

<script>
export default {
  name: 'DragNode',
  components: {},
  inject: ['getNode'],
  data() {
    return {
	    item:null,
    };
  },
  mounted() {
    const node = this.getNode();
	node.on('change:data', ({current}) => {
      this.item = current;
    })
    const data = node.getData()
    this.item = data;
  },
  methods: {}
};
</script>

<style scoped>
.set_operator {
  cursor: pointer;
  width: 67px;
  height: 57px;
  border: 1px solid #e0e6ed;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  overflow: auto;
  position: relative;

  & > img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
}
.item_label {
  width: 100%;
  font-size: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: 1px;
}
.icon-shanchu {
  display: none;
  font-size: 16px;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #aaaaaa;
}
.input {
  &:hover {
    border: 1px solid #0500e6;
    box-shadow: 5px 5px 5px #0500e6;
  }
}
.active_input {
  border: 1px solid #0500e6;
  box-shadow: 5px 5px 5px #0500e6;
}
.convert {
  &:hover {
    border: 1px solid #70b603;
    box-shadow: 5px 5px 5px #70b603;
  }
}
.active_convert {
  border: 1px solid #70b603;
  box-shadow: 5px 5px 5px #70b603;
}
.analysis {
  &:hover {
    border: 1px solid #f59a23;
    box-shadow: 5px 5px 5px #f59a23;
  }
}
.active_analysis {
  border: 1px solid #f59a23;
  box-shadow: 5px 5px 5px #f59a23;
}
</style>
